<template>
  <button :class="`my-btn btn-${type}`"><slot></slot></button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "Button",
    },
  },
};
</script>

<style lang="scss" scoped>
// 留言墙和照片墙是小尺寸的 primary default控制选中的颜色
// 丢失按钮属于中尺寸 middle
// 确定按钮属于大尺寸 large
.my-btn {
  border-radius: 20px;
  font-size: $font-14;

  &.btn-primary {
    width: 82px;
    height: 36px;
    background: #3b73f0;
    color: $gray-10;
  }
  &.btn-default {
    width: 82px;
    height: 36px;
    background: $gray-10;
    color: $gray-1;
  }
  &.btn-middle {
    width: 100px;
    height: 48px;
    border: 1px solid rgba(32, 32, 32, 1);
    border-radius: 24px;
    color: $gray-1;
  }
  &.btn-large {
    width: 200px;
    height: 48px;
    background: $gray-1;
    border-radius: 24px;
    color: $gray-10;
  }
}
</style>
